<template>
  <div>
    <div style="display: -webkit-flex;display: flex;">

<!--      <el-card class="box-card" >

        <div id="box">
          <div >
            <h4 style="font-family: STLiti,serif;color: #2C9FAF">SHOSPITAL</h4>
            <div style="text-align: center"><h2 >门诊处方笺</h2></div>
          </div>
          <el-descriptions title="患者信息">
            <el-descriptions-item label="处方号">{{value2.id}}</el-descriptions-item>
            <el-descriptions-item label="科室">{{value2.department.name}}</el-descriptions-item>
            <el-descriptions-item label="日期">{{value2.createTime}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{value2.medicalCard.name}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{value2.medicalCard.sex}}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{value2.medicalCard.sex}}</el-descriptions-item>
            <el-descriptions-item label="初步诊断">{{value2.outpatients.chiefComplaint}}</el-descriptions-item>
          </el-descriptions>

          <div style="display: flex">
            <div style="font-size: 1.1rem">
              <img style="width: 70px;height: 70px"
                   :src="require('@/assets/prescription.png')">
            </div>
          </div>

          <div style="margin: 20px 0 0 185px;" >
            <ul>
              <li v-for="site in prescriptionDrugs" >
                {{ site.drug.name }}&nbsp{{site.num}}{{site.drug.unit}}
              </li>
            </ul>
          </div>
          <div style="display: flex;margin: 200px 0 0 0;height: 300px" >
            <el-descriptions>
              <el-descriptions-item label="医嘱">{{value2.outpatients.advice}}</el-descriptions-item>
              <el-descriptions-item label="医师">{{value2.user.name}}</el-descriptions-item>
              <el-descriptions-item label="药费">{{Prescription.totalPrice}}</el-descriptions-item>

            </el-descriptions>
          </div>
        </div>

      </el-card>-->
<!--      <div v-print="'#box'" style="color: cornflowerblue">打印</div>-->
      <div style="margin-left: 10px">
        <h3 style="margin-left: 120px">取药</h3>
        <el-form :inline="true" :model="Prescription" class="demo-form-inline">
          <el-form-item>
            <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="medicalCard.id"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item><br>
          <el-table
              ref="singleTable"
              :data="prescription"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%"
              height="300">
            <el-table-column
                prop="id"
                label="处方号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="时间"
                width="300">
            </el-table-column>
            <el-table-column prop="payStatus" label="缴费状态" width="120" fixed="right">
              <template #default="scope" >
                <el-tag v-if="scope.row.payStatus" type="success">已缴费</el-tag>
                <el-tag v-else type="danger">未缴费</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="取药状态" width="120" fixed="right">
              <template #default="scope">
                <el-tag v-if="scope.row.takeStatus" type="success">已取药</el-tag>
                <el-tag v-else type="danger">未取药</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <el-select v-model="value3" multiple placeholder="请选择">
            <el-option
                v-for="item in prescriptionDrugs"
                :key="item.id"
                :label="item.drug.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-form-item>
            <el-button type="primary" @click="toUpdate">取药完成</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "Dispensary",
  data(){
    return{
      formLabelWidth:'120px',
      payStatus:'',
      value1:[
        {
          label:'未收费',
          value:false
        },
        {
          label:'已收费',
          value:true
        }
      ],
      prescription:[
        {
          user:'',
          department:'',
          medicalCard:'',
          outpatients:'',
          prescriptionDrugs:''
        }
      ],

      user:{
        name:'',
      },
      department:{
        name:''
      },
      medicalCard: {
        id:'',
        name:'',
        sex:'',
        telephone:'',
        idCard:'',
        email:''
      },
      outpatients:{
        id:'',
        mid:'',
        diagnosis:'',
        chiefComplaint:'',
        advice:'',
        uid:'',
        preId:'',
        iid:'',
        rid:'',
        enabled:''
      },
      value2:{
        outpatients:'',
        medicalCard:'',
        user:'',
        department:''
      },
      drugs: {
        prescriptionDrugs:''
      },
      prescriptionDrugs:[
        {
          num:'',
          drug:''
        }
      ],
      drug:{
        id:'',
        name:'',
        specification:'',
        unit:'',
        num:''
      },
      Prescription:{
        id:'',
        totalPrice: '',
        revPrice: '',
        backPrice: '',
      },
      allDrugs:[{
        id:'',
        name:'',
      }],
      value3:[],
      flag:''
    }
  },
  methods:{
    //根据卡号获取处方
    onSubmit(){
      this.value3='';
      this.getRequest("/dispensary/getPreByMid?mid="+this.medicalCard.id).then(resp=>{
        if(resp){
          this.prescription=resp.obj;
        }
      })
    },
    //根据处方号获取药品
    handleCurrentChange(index){
      this.flag=index.payStatus;
      this.getRequest("/dispensary/getDrugsByPreId?preId="+index.id).then(resp=>{
        if(resp){
          console.log(resp.obj);
          this.prescriptionDrugs=resp.obj;
          console.log(this.prescriptionDrugs);
        }
      })
    },
    //完成取药
    toUpdate(){
      if(this.flag){
        this.putRequest("/dispensary/updateDrugs?ids="+this.value3).then(resp=>{
          if(resp){
            this.onSubmit();
          }
        })
      }else{
        Message.error("该处方还未缴费!请先缴费!");
      }

    }
  }
}
</script>

<style scoped>
.box-card {
  width: 800px;
  height: 800px;
}
</style>